<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            height: 0px;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .head {
            width: 100%;
            height: 20px;
      
        }

        .head-tou {
            width: 1200px;
            height: 20px;
            
            margin: 0 auto;
            background-color: black;
        }

        .head-tou span {
            color: white;
            font-size: 12px;
        }

        .haha1 {
            float: right;
            margin-right: 15px;
        }

        .haha {
            float: right;
            margin-right: 115px;
        }

        .shangban {
            width: 1200px;
            height: 90px;
            margin: 0 auto;
        }

        .shangban img {
            width: 40px;
            height: 40px;
            box-sizing: border-box;
            margin-top: 15px;
        }

        .shangban ul li {
            float: left;
            margin-left: 175px;
            margin-top: -35px;
        }

        .go {
            width: 200px;
            height: 40px;
            border: 1px solid red;
            float: right;
            margin-top: -35px;
        }

        .go input {
            widows: 160px;
            height: 100%;
            box-sizing: border-box;
            border: none;
        }

        .zhongjian {
            width: 1200px;
            height: 500px;
          
            margin: 0 auto;

        }

        .left {
            width: 250px;
            height: 500px;
           
            background-color: orange;
        }

        .zi {
            width: 250px;
            height: 48px;
   

        }

        .zi span {
            float: left;
            margin-top: 15px;
            margin-left: 15px;
        }

        .backg {
            width: 950px;
            height: 500px;
         
            float: right;
            margin-top: -500px;
            background-image: url(./T1vWdTBKDv1RXrhCrK.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: -300px 0px;
        }

        .nan {
            width: 1200px;
            height: 200px;
           
            margin: 0 auto;
        }

        .haha2 {
            width: 250px;
            height: 150px;
        
            float: left;
            margin-left: 15px;
            margin-top: 15px;
        }

        .haha2 li {
            width: 60px;
            height: 60px;
            border: 1px solid red;
            float: left;
            margin-top: 12px;
            font-size: 14px;
        }

        .haha2 img {
            width: 250px;
            height: 150px;

        }

        .jiayou {
            width: 1200px;
            height: 250px;
           
            margin: 0 auto;
        }

        .jiayou ul li {
            width: 180px;
            height: 220px;
         
            float: left;
            margin-top: 25px;
            margin-left: 35px;
        }

        .tu11 {
            width: 180px;
            height: 220px;
            background-image: url(./T1meZjBCAT1RXrhCrK.jpg);
            background-repeat: no-repeat;
            display: inline-block;
        }

        .wenzi11 {
            float: left;
            margin-top: -70px;
            margin-left: 20px;
        }

        .wenzi22 {
            float: left;
            font-size: 12px;
            color: silver;
            margin-left: 18px;
            margin-top: -40px;
        }

        .dibu {
            width: 1200px;
            height: 550px;
   
            margin: 0 auto;
        }

        .dibu h3 {

            margin-top: 20px;
            margin-left: 35px;
        }

        .chang {
            width: 200px;
            height: 480px;
          
            margin-top: 25px;
            background-image: url(./T1IhLjBC_T1RXrhCrK.jpg);
            background-repeat: no-repeat;
            background-size: contain;
            float: left;
        }

        .dibu ul li {
            width: 180px;
            height: 220px;
           
            float: left;
            margin-top: 25px;
            margin-left: 25px;
        }

        .tu22 {
            width: 180px;
            height: 120px;
            background-image: url(./xiaoyi!160x110.jpg);
            display: inline-block;
        }

        .wenzi2 {
            font-size: 14px;
            margin-left: 35px;
        }

        .wenzi3 {
            font-size: 12px;
            color: silver;
            float: left;
            margin-left: 15px;
            margin-top: 10px;
        }

        .wenzi4 {
            color: yellow;
            float: left;
            margin-top: 30px;
            margin-left: 65px;
        }

        .foot {
            width: 1200px;
            height: 250px;
        
            margin: 0 auto;
        }

        .shang2 {
            width: 1200px;
            height: 60px;
         
            margin: 0 auto;
        }

        .shang2 span {
            width: 130px;
            height: 20px;
         
            float: left;
            margin-left: 70px;
            margin-top: 20px;
            font-size: 14px;
            color: silver;
        }

        .bangzhu {
            width: 130px;
            height: 180px;
         
            float: left;
            margin-left: 35px;
        }

        .touteng li {
            height: 25px;
        }

        .woc {
            margin-top: 15px;
            height: 35px;
        }

        .woc1 {
            height: 25px;
            font-size: 12px;
            color: silver;
        }
        .xian{
            width: 0px;
            height: 100px;
            border: 1px solid black;
            float: right;
            margin-right: 250px;
            margin-top: 50px;
        }
        .box2{
            width: 200px;
            height: 200px;
          
            float: right;
            margin-right: -220px;
        }
        .zit{
            color: orange;
            float: left;
            margin-top: 40px;
            margin-left: 45px;
        }
        .zit1{
            float: left;
            margin-top: 30px;
            width: 180px;
            font-size: 14px;
            margin-left: 30px;
        }
        .zit2{
            float: left;
            margin-top: 30px;
            width: 180px;
            font-size: 14px;
            margin-left: 60px;
        }
        .zit3{
            width: 110px;
            height: 30px;
            border: 1px solid orange;
            float: right;
            margin-top: 50px;
            margin-right: 40px;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            color: orange;
        }
        .zuihou1{
            width: 1200px;
            height: 20px;
        
            margin: 0 auto;
        }
        .zuihou1 img{
            width: 20px;
            height: 20px;
            background-color: orange;
        }
        .zuihou1 span{
            font-size: 12px;
        
        }
    </style>
</head>

<body>
    <div class="head">
        <div class="head-tou">
            <span>小米商城 &nbsp; MIUI &nbsp;| &nbsp;IoT&nbsp; | &nbsp;云服务 &nbsp;|
                &nbsp;金融 &nbsp;| &nbsp;有品&nbsp; | &nbsp;小爱开放平台 &nbsp;| &nbsp;企业团购&nbsp;
                |&nbsp; 资质证照&nbsp;|&nbsp; 协议规则 &nbsp;| &nbsp;下载app &nbsp;| &nbsp;Select Location</span>
            <span class="haha">登录/注册</span>
            <span class="haha1">购物车（0）</span>
        </div>
    </div>
    <div class="shangban">
        <img src="./xiaomi_logo.png" alt="">
        <ul>
            <li>大米手机 &nbsp; &nbsp; 红米&nbsp;&nbsp; 平板&nbsp;&nbsp; 电视 &nbsp;&nbsp;盒子&nbsp;&nbsp; 路由器&nbsp;&nbsp;
                智能硬件&nbsp;&nbsp; 服务 &nbsp;&nbsp;社区 </li>

        </ul>
        <div class="go">
            <input type="text"> <img src="" alt="">
        </div>
    </div>
    <div class="zhongjian">
        <div class="left">
            <div class="zi"> <span>手机 平板 &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </div>
            <div class="zi"> <span>手机 平板 &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </div>
            <div class="zi"> <span>手机 平板 &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </div>
            <div class="zi"> <span>手机 平板 &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </div>
            <div class="zi"> <span>手机 平板 &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </div>
            <div class="zi"> <span>手机 平板 &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </div>
            <div class="zi"> <span>手机 平板 &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </div>
            <div class="zi"> <span>手机 平板 &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </div>
            <div class="zi"> <span>手机 平板 &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </div>
            <div class="zi"> <span>手机 平板 &nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </div>


        </div>
        <div class="backg">
        </div>
    </div>
    <div class="nan">
        <ul>
            <li class="haha2">
                <ul>
                    <li> START 开放购买</li>
                    <li> START 开放购买</li>
                    <li> START 开放购买</li>
                    <li> START 开放购买</li>
                    <li> START 开放购买</li>
                    <li> START 开放购买</li>

                </ul>
            </li>
            <li class="haha2"><img src="./T1mahQBmKT1RXrhCrK.jpg" alt=""></li>
            <li class="haha2"><img src="./T1mahQBmKT1RXrhCrK.jpg" alt=""></li>
            <li class="haha2"><img src="./T1mahQBmKT1RXrhCrK.jpg" alt=""></li>


        </ul>
    </div>
    <div class="jiayou">
        <h3>大米明星名单</h3>
        <ul>
            <li> <span class="tu11"></span><span class="wenzi11">大米盒子增强版1G</span><span
                    class="wenzi22">首款4K超高清网络机顶盒</span></li>
            <li> <span class="tu11"></span><span class="wenzi11">大米盒子增强版1G</span><span
                    class="wenzi22">首款4K超高清网络机顶盒</span></li>
            <li> <span class="tu11"></span><span class="wenzi11">大米盒子增强版1G</span><span
                    class="wenzi22">首款4K超高清网络机顶盒</span></li>
            <li> <span class="tu11"></span><span class="wenzi11">大米盒子增强版1G</span><span
                    class="wenzi22">首款4K超高清网络机顶盒</span></li>
            <li> <span class="tu11"></span><span class="wenzi11">大米盒子增强版1G</span><span
                    class="wenzi22">首款4K超高清网络机顶盒</span></li>

        </ul>
    </div>
    <div class="dibu">
        <h3>智能硬件</h3>
        <div class="chang"></div>
        <ul>
            <li><span class="tu22"></span><span class="wenzi2">小蚁智能摄像机</span><span
                    class="wenzi3">能看能听能说,手机远程观看</span><span class="wenzi4">149元</span></li>
            <li><span class="tu22"></span><span class="wenzi2">小蚁智能摄像机</span><span
                    class="wenzi3">能看能听能说,手机远程观看</span><span class="wenzi4">149元</span></li>
            <li><span class="tu22"></span><span class="wenzi2">小蚁智能摄像机</span><span
                    class="wenzi3">能看能听能说,手机远程观看</span><span class="wenzi4">149元</span></li>
            <li><span class="tu22"></span><span class="wenzi2">小蚁智能摄像机</span><span
                    class="wenzi3">能看能听能说,手机远程观看</span><span class="wenzi4">149元</span></li>
            <li><span class="tu22"></span><span class="wenzi2">小蚁智能摄像机</span><span
                    class="wenzi3">能看能听能说,手机远程观看</span><span class="wenzi4">149元</span></li>
            <li><span class="tu22"></span><span class="wenzi2">小蚁智能摄像机</span><span
                    class="wenzi3">能看能听能说,手机远程观看</span><span class="wenzi4">149元</span></li>
            <li><span class="tu22"></span><span class="wenzi2">小蚁智能摄像机</span><span
                    class="wenzi3">能看能听能说,手机远程观看</span><span class="wenzi4">149元</span></li>
            <li><span class="tu22"></span><span class="wenzi2">小蚁智能摄像机</span><span
                    class="wenzi3">能看能听能说,手机远程观看</span><span class="wenzi4">149元</span></li>
        </ul>
    </div>
    <div class="foot">
        <div class="shang2">
            <span>1小时快修服务 </span>
            <span>7天无理由退货</span>
            <span>15天免费换货</span>
            <span>满150元包邮</span>
            <span>520余家售后网点</span>
        </div>
        <hr>
        <div>
            <ul>
                <li class="bangzhu">
                    <div class="woc">客服中心</div>
                    <div class="woc1">购物指南</div>
                    <div class="woc1">支付方式</div>
                    <div class="woc1">配送方式</div>
                </li>
                <li class="bangzhu">
                    <div class="woc">客服中心</div>
                    <div class="woc1">购物指南</div>
                    <div class="woc1">支付方式</div>
                    <div class="woc1">配送方式</div>
                </li>
                <li class="bangzhu">
                    <div class="woc">客服中心</div>
                    <div class="woc1">购物指南</div>
                    <div class="woc1">支付方式</div>
                    <div class="woc1">配送方式</div>
                </li>
                <li class="bangzhu">
                    <div class="woc">客服中心</div>
                    <div class="woc1">购物指南</div>
                    <div class="woc1">支付方式</div>
                    <div class="woc1">配送方式</div>
                </li>
            </ul>
        </div>
        <div class="xian">

        </div>
        <div class="box2">
           <span class="zit">400-100-5678</span>
           <span class="zit1">周一至周日 8:00-18:00</span>
           <span class="zit2">(仅收市话费)</span>
            <span class="zit3">24小时在线客服</span>
        </div>
    </div>
     <div class="zuihou1">
         <img src="./mi-logo.png" alt=""><span>大米网|MIUI|米聊|多看书城|大米路由器|大米后院|大米天猫店|大米淘宝直营店|大米网盟|问题反馈|Select Regior 5555555号</span>
     </div>
</body>

</html>